<%@ page contentType="text/html;charset=UTF-8" %>

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iPlayas</title>
    <link rel="shortcut icon" href="img/favicon.ico"/>

    <link rel="stylesheet" href="css/layout.css" type="text/css" media="all"/>
    <style type="text/css">
    #body {
    }

    .mainText {
        text-align: center;
        width: 400px;
        font: 17px/20px "Lucida Sans", Arial;
        text-shadow: black 1px 1px 1px;
    }

    .subText {
        margin-top: 40px;
        width: 400px;
        font: 13px/17px "Lucida Sans", Arial;
        text-shadow: black 1px 1px 1px;
    }

    h1 strong {
        color: white;
        text-shadow: white 0 0 4px;
        clear: both;
    }

    h1 {
        text-align: center;
        width: 400px;
        font: 30px "Lucida Sans", Arial;
        text-shadow: black 1px 1px 1px;
        padding-right: 40px;
        color: #eb6c6c;
    }

    a {
        color: #4e81af;
    }

    #iphone {
        position: absolute;
    }

    #ifr {
        border: 0;
        position: relative;
        top: 144px;
        left: 88px;
        width: 378px;
        height: 570px;
    }

    #badge {
        border: 0;
        position: relative;
        top: -610px;
        left: 440px;
    }

    </style>

    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-23201876-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();

    </script>
</head>

<body>

<div style="margin:auto;width:900px" id="body">

    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="top">
                <img src="images/iplayas2.png"/>
                <div class="mainText">
                    <h1>Simplemente visita <br/><strong>http://iplayas.es</strong><br/> desde tu móvil</h1>

                </div>
                <div class="subText">

                    <p><strong>iPlayas</strong> es una aplicación móvil que, usando tu posición real en el GPS, localiza las playas más cercanas,
                    mostrando información útil como la distancia a la que está, si es accesible para minusválidos, es nudista, tiene bandera azul, aseos o cruz roja, etc. Muestra también su posición en Google Maps.
                        <br/><img src="images/accesible.jpg"/><img src="images/cruz-roja.jpg"/><img src="images/bandera-azul.png"/>
                    </p>

                    Desarrollado durante las 48 horas del desafio Abredatos por el equipo <a href="http://live.abredatos.es/teams/14">Playitas</a>, formado por:
                    <ul><li>Alberto Vilches <a href="http://albertovilches.com">blog</a>, <a href="http://twitter.com/albertovilches">@albertovilches</a></li>
                        <li>Adrián de la Horra</li>
                        <li>Marco Martinez <a href="http://twitter.com/marquetemb">@marquetemb</a></li>
                    </ul>


                    <br/>
                    <br/>
                    %{--<a href="http://grails.org"><img src="images/grails_logo.png"/></a>--}%
                    %{--<a href="http://lucene.apache.org/solr/"><img src="images/solr_fc.jpg"/></a>--}%
                    %{--<a href="http://www.w3.org/TR/html5/"><img src="images/HTML5_Logo_256.jpg"/></a>--}%
                    %{--<a href="http://jqtouch.com/"><img src="images/JQTouch_iPhone.png"/></a>--}%

                    <p style="text-align:center">
                        2011 <a href="http://www.opensource.org/licenses/apache2.0">Apache License</a> | <a href="http://code.google.com/p/playitas-abredatos/">Código fuente</a> |  <a href="http://www.abredatos.es/">Abredatos</a>
                    </p>
                </div>

            </td>
            <td valign="top" style="padding-top:10px;padding-left:20px">
                <img src="images/iphone_big.png" id="iphone"/>
                <iframe src="${g.createLink(action: 'index', params: [mobile: 'true'])}" id="ifr"></iframe>
                <img src="images/badge.png" id="badge"/>
            </td>

        </tr>
    </table>

</div>

</body>
</html>
